import { Button } from "std-widgets.slint";

struct SnakeSegment {
    x: int,
    y: int,
}

struct Food {
    x: int,
    y: int,
}

export global Constants {
    out property <length> WIDTH: 30px;
    out property <length> SIDE_WIDTH: 200px;
}

component Grid inherits Rectangle {
    in-out property <length> WIDTH: Constants.WIDTH;
    in-out property <int> pos-x;
    in-out property <int> pos-y;
    x: self.pos-x * self.WIDTH;
    y: self.pos-y * self.WIDTH;
    width: self.WIDTH;
    height: self.WIDTH;
}

export component AppWindow inherits Window {
    title: "Snake";

    in-out property <[SnakeSegment]> snake;
    in-out property <Food> food;
    in-out property <int> row_size: 18;
    in-out property <int> col_size: 25;
    in-out property <bool> game-over: false;
    in-out property <int> score: 0;
    in-out property <int> time: 0;

    callback key-pressed(event: KeyEvent);
    callback start-game();
    callback pause-game();
    callback continue-game();

    width: layout.width;
    height: layout.height;

    layout := HorizontalLayout {
        width: game-area.width + control-area.width + 30px;
        height: game-area.height + 20px;
        spacing: 10px;
        padding: 10px;

        // 游戏绘制区域
        game-area := Rectangle {
            width: root.col_size * Constants.WIDTH;
            height: root.row_size * Constants.WIDTH;

            // 绘制蛇身体
            for seg[index] in snake : Grid {
                pos-x: seg.x;
                pos-y: seg.y;
                background: green;
            }

            // 绘制食物
            Grid {
                pos-x: food.x;
                pos-y: food.y;
                background: red;
            }

            area := FocusScope {
                width: parent.width;
                height: parent.height;
                key-pressed(event) => {
                    root.key_pressed(event);
                    return EventResult.accept;
                }
            }

            if root.game-over : Rectangle {
                width: 300px;
                height: 100px;
                background: #aaa;
                border-radius: 10px;
                
                Text {
                    width: parent.width;
                    height: parent.height;
                    text: "Game Over";
                    font-size: 32px;
                    color: red;
                    x: 40px;
                    y: 23px;
                }
            }
        }

        // 侧边栏
        control-area := Rectangle {
            width: Constants.SIDE_WIDTH;
            height: game-area.height;
            background: #aaa;
            border-radius: 5px;

            VerticalLayout {
                width: parent.width;
                height: parent.height;
                padding: 10px;
                spacing: 20px;                

                Rectangle {
                    Text {
                        width: parent.width;
                        height: parent.height;
                        text: "Score: " + root.score;
                        font-size: 20px;
                    }
                }

                Rectangle {
                    Text {
                        width: parent.width;
                        height: parent.height;
                        text: "Time: " + root.time + "s";
                        font-size: 20px;
                    }
                }

                Button {
                    text: "Start";
                    clicked => {
                        if self.text == "Start" {
                            root.start-game();
                            self.text = "Pause";
                        } else if self.text == "Pause" {
                            root.pause-game();
                            self.text = "Continue";
                        } else if self.text == "Continue" {
                            root.continue-game();
                            self.text = "Pause";
                        } 
                    }
                }

                Rectangle { }
            }
        }
    }
}
